import React, { Component } from 'react';
import {Link} from 'react-router';
import {BankList} from '../../Action/auth';
import '../../Stylesheets/wx/recharge.css'
import Empty from '../CommonComponent/Empty'
import Top from '../CommonComponent/Top'

export default class MyBankList extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            bankList:[]
        };
    }
    componentWillMount() {
        this.getBankList()
    }
    async getBankList(){
        await BankList()
            .then(res=>{
                this.setState({bankList:res})
            })
            .catch(err=>{
                console.warn('err',err)
            })
    }
    render() {
        const {bankList} = this.state
        return (
            <div>
                <Top
                    title ={'我的银行卡'}
                />
                <div className="containerNav" style={{top:50,bottom:50}}>
                    <div className="ChooseHeight">
                        {
                            bankList.length == 0?
                                <Empty />
                                :
                            bankList&&bankList.map(el=>{
                                return(
                                    <Link
                                        to="/modifyBankCard"
                                        query={{
                                                bankId:el.id,
                                                bankName:el.bankName,
                                                name:el.name,
                                                bankCardNo:el.bankcardNo,
                                                pro:el.pro,
                                                city:el.city,
                                                area:el.area,
                                                branch:el.branch,
                                                mobile:el.mobile,
                                                idNo:el.idNo
                                                }}
                                    >
                                        <div style={{paddingLeft:20}} className="BankHeight flex border_4 pa_top mt5">
                                            <span className="di" style={{width:50,height:50}}><img src={require('../../Images/bank.png')} alt=""/></span>
                                            <div className="flex-1 colorfff f14 ml">
                                                <span className="di" style={{marginTop:2}}>{el.bankName}</span>
                                                <div>储蓄卡</div>
                                                <div style={{marginTop:25}}>
                                                    <span>****</span>
                                                    <span className="di ml">****</span>
                                                    <span className="di ml">****</span>
                                                    <span className="di ml">{el.bankcardNo.substr(el.bankcardNo.length-4)}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </Link>
                                )
                            })
                        }

                    </div>
                    <div className="footerHidden"></div>
                </div>
                {
                    bankList.length == 0?
                        <Link to="/bankInformation">
                            <div className="pf bottom0 tc userHeight width100 colorfff f16 bgk_lv">
                                添加银行卡
                            </div>
                        </Link>
                        :null

                }
            </div>
        );
    }
}
